<template>
  <div class="contract_component">
    <ZwTable ref="tableRef" class="table-box" :option="tableOption" :paramProp="state.paramProp" :rowKey="getRowKey" :fetch-params="state.searchParams" :fetch-api="fetchApi()" @select-all="onSelectAll" @select="onSelect"> </ZwTable>
  </div>
</template>

<script setup lang="tsx">
  import { ref, reactive, nextTick } from 'vue'
  import ZwTable from '@/components/zw/table/Table'
  import { deepCopy } from '@/utils/helper'
  import { getContract } from '@/api/customer/manage/list'
  import { useRoute, useRouter } from 'vue-router'
  const tableRef: any = ref(null)
  const router = useRouter()
  const route = useRoute()

  const tableOption = [
    {
      prop: 'contract_no',
      label: '合同编号',
      width: 300,
      render({ row }) {
        return (
          <span class="contract_no" onClick={() => toDetails(row)}>
            {row.contract_no}
          </span>
        )
      }
    },
    {
      prop: 'title',
      label: '合同名称',
      width: 200,
      showOverflowTooltip: true,
      render({ row }) {
        return <span>{row.title || '--'}</span>
      }
    },
    {
      prop: 'contract_amount',
      label: '合同金额',
      //   width: 200
      render({ row }) {
        return <span>{row.contract_amount || '--'}</span>
      }
    },
    {
      prop: 'audit_state',
      label: '审批状态',
      //   width: 200
      render({ row }) {
        return <span>{auditState(row.audit_state)}</span>
      }
    },
    {
      prop: 'state',
      label: '合同状态',
      //   width: 200
      render({ row }) {
        return <span>{contractStatus(row)}</span>
      }
    },
    {
      prop: 'staff_name',
      label: '所属员工',
      render({ row }) {
        return <span>{row.staff_name || '--'}</span>
      }
    }
  ]
  const getRowKey = (row: any) => {
    return row.id
  }

  const defaultParams = reactive({
    type: 1,
    cust_id: ''
  })
  const state = reactive({
    searchParams: deepCopy({ ...defaultParams, cust_id: route.query.id }),
    paramProp: { page: '', pageSize: 'page_size' }
  })
  const fetchApi = () => {
    // 获取文件列表
    return getContract
  }
  const toDetails = (row: any) => {
    router.push({ path: '/salesleads/salesmanagement/contractmanagement/contractDetail', query: { id: row.id } })
  }
  const auditState = (type: any) => {
    const typeObj = {
      1: '待提交',
      2: '审批中',
      3: '已撤回',
      4: '已驳回',
      5: '已通过'
    }
    return typeObj[type]
  }
  const contractStatus = (row: any) => {
    let str = ''
    if (row.is_expire == 1) {
      if ((row.first_state == 1 && row.second_state != 2) || (row.first_state != 2 && row.second_state == 1)) {
        str = '未签约'
      }
      if (row.first_state == 2 && row.second_state == 1) {
        str = '甲方已签约'
      } else if (row.first_state == 1 && row.second_state == 2) {
        str = '乙方已签约'
      } else if (row.first_state == 2 && row.second_state == 2) {
        str = '双方已签约'
      }
      return str
    }
  }
</script>

<style lang="scss" scoped>
  :deep(.contract_no) {
    color: #ff6b00;
    cursor: pointer;
  }
</style>
